<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梭哈游戏</title>
    <!--引入css 需要用这个标签-->
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
    <script src="js/web3.js"></script>
    <!--核心js 文件.-->
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.js"></script>
    <style>
            *{
                 margin: 0;
                 padding: 0;
                 list-style: none;
            }
            .layout{
                   width: 80%;
                   margin: 40px auto;
            }
            .area_showhand{
                  border: 1px solid #ccc;
                  width: 90%;
                  margin: 20px auto;
                  height: 200px;
                  border-radius: 5px;
            }
			.first_address , .second_address,.active_address{
				 width: 90%;
				 padding-left: 50px;
			}
            .area_showhand ul{

            }
            .area_showhand ul li{
                  width: 20%;
                  float: left;
            }
            .area_showhand ul li a{
                  display: block;
                  width: 60%;
                  margin: 10px auto;
            }
            .area_showhand ul li a img{
                  width: 100%;
				  border: 1px solid #ccc;
				  height:180px;
            }
            .weiclass{
                  width: 100px;
                  display: inline-block;
            }
    </style>
    <script>
            //页面加载完毕会调用.
            $(function() {
				//创建web3 对象.
				// set the provider you want from Web3.providers
				var web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545"));
                                web3.eth.getAccounts(function(error,result){
                                     console.log(result);
                                });
				$('#myModal').modal();
				
				var abi = [
	{
		"constant": false,
		"inputs": [],
		"name": "bringIn",
		"outputs": [],
		"payable": true,
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "minmalBet",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "withDraw",
		"outputs": [],
		"payable": true,
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "bet",
		"outputs": [],
		"payable": true,
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"name": "isPlayerActioned",
		"outputs": [
			{
				"name": "",
				"type": "bool"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "round",
		"outputs": [
			{
				"name": "",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "getPocket",
		"outputs": [
			{
				"name": "",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"name": "roundBalance",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"name": "totalBalance",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "activePlayer",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "hostPlayer",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "pass",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "join",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "resetRoundData",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "pos",
				"type": "uint8"
			}
		],
		"name": "getPlayerCard",
		"outputs": [
			{
				"name": "host",
				"type": "uint8"
			},
			{
				"name": "guest",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "winner",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "guestPlayer",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "fold",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "bringInBet",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "getRoundBalance",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"inputs": [
			{
				"name": "_cto",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "constructor"
	},
	{
		"anonymous": false,
		"inputs": [
			{
				"indexed": false,
				"name": "player",
				"type": "address"
			},
			{
				"indexed": false,
				"name": "card",
				"type": "uint8"
			}
		],
		"name": "onCardDeal",
		"type": "event"
	},
	{
		"anonymous": false,
		"inputs": [],
		"name": "onGameCreated",
		"type": "event"
	},
	{
		"anonymous": false,
		"inputs": [
			{
				"indexed": false,
				"name": "player",
				"type": "address"
			}
		],
		"name": "onPlayerJoined",
		"type": "event"
	},
	{
		"anonymous": false,
		"inputs": [
			{
				"indexed": false,
				"name": "addr",
				"type": "address"
			},
			{
				"indexed": false,
				"name": "value",
				"type": "uint256"
			}
		],
		"name": "onBet",
		"type": "event"
	}
];
				var address = "0x7db1db66ddda6a38e51390d5e6fef869750152e4";
				var account_address;
				var wei;
				var Round_number = 0;
				var i;
				var hostAccount;
				var guestAccount;
				//得到对象。
				var showhand = new web3.eth.Contract(abi, address);
				console.log(showhand);



				//解锁函数
				function unlockAccount(account_address) {
					web3.eth.personal.unlockAccount(account_address, "123", function (error, result) {
					
					});
				}
				//取牌函数
				function get_card(num){
					if(num >1){
					
					showhand.methods.getPlayerCards(num-1).call(function (error, result){ 
						
				    	var i = result.host;

						var guest=result.guest;

							var expre=".first ul li:nth-child("+num+") img";
					  		$(expre).attr("src","images/"+guest+".png")
							$(expre).attr("title",guest)  

							var expre=".second ul li:nth-child("+num+") img";
					  		$(expre).attr("src","images/"+i+".png")
							$(expre).attr("title",i) 
	
					});
					}else{
						//获取底牌
						showhand.methods.getPocket().call({from:account_address,gas:3000000},function (error, result){ 
						console.log(result);
				    	var i = result;
						
						hostAccount=hostAccount.toLowerCase();
						account_address=account_address.toLowerCase();
						guestAccount=guestAccount.toLowerCase();

						if(account_address==guestAccount){
							var expre=".first ul li:nth-child(1) img";
							console.log($(expre))
					  		$(expre).attr("src","images/"+i+".png")
							//$(expre).attr("title",guest);  
						}
						if(account_address==hostAccount){
							var expre=".second ul li:nth-child(1) img";
							console.log($(expre))
					  		$(expre).attr("src","images/"+i+".png")
							$(expre).attr("title",i); 
						}
	
					});
					}
				}		

				//获取Player
				function get_Player(){
					showhand.methods.hostPlayer().call(function(error, result){
						console.log(result)
						hostAccount = result;
						$(".second_address span:nth-child(2)").html(hostAccount);
					});

					showhand.methods.guestPlayer().call(function(error, result){
						console.log(result)
						guestAccount = result;
						$(".first_address span:nth-child(2)").html(guestAccount);
					});
				}

				//加入游戏
				$(".joinGame").on("click", function () {
					account_address = $("#addressId").val();

					unlockAccount(account_address);
					showhand.methods.join().send({from: account_address}, function (error, result) {
						console.log("join "+result);
						if (!error) {
							alert("加入成功");
							$(".close_win").click();
                                                        
						}
					})
				});
			
				//下底注
				$(".BringIn").on("click", function () {
						showhand.methods.bringIn().send({
							from: account_address,
							value: 100,
							gas: 3000000
						}, function (error, result) {
							if (!error) {
								console.log(error);
								alert("下底注成功");
								get_Player();
                getActivePlayer();
							}
						});
				});
				//看牌
				$(".second ul li").on("click",function(){
					  console.log($(this).index());
					  var number=$(this).index();
					  get_card(number+1);
				})	
			
				//下注
				$(".Bet").on("click", function () {
						wei = $(".getWei").val();

						showhand.methods.bet().send({
							from: account_address,
							value: wei,
							gas: 3000000
						}, function (error, result) {
							if (!error) {
								alert("下注成功");
								get_Player();
                getRoundBalance();
                getActivePlayer();
							}
						});
				});

			

				//查看赢家
				$(".getWinner").on("click", function(){
					showhand.methods.winner().call(function (error, result){
						console.log(result);
                                              
                                                
					});
				});
          //弃牌
          $(".Pass").on("click", function(){
					showhand.methods.pass().send({from:account_address,gas:300000},function (error, result){
						console.log(result);
                if (!error) {
						   console.log(error);
						   alert("过牌成功");
                getActivePlayer();
               }
					});
				});
          //过牌
          $(".AbandonCard").on("click", function(){
					  showhand.methods.fold().send({from:account_address,gas:300000},function (error, result){
						console.log(result);
                if (!error) {
						   console.log(error);
						   alert("弃牌成功");
               getActivePlayer();
              }
					});
				});
            //get active player
            function getActivePlayer()
            {
             showhand.methods.activePlayer().call(function (error, result){
						console.log("active  "+result);
             if (!error) {
             $(".active_address span:nth-child(2)").html(result);
             }
					});
            }
            //get roundbalance
            function getRoundBalance()
            {
            showhand.methods.getRoundBalance().call(function (error, result){
						console.log("roundbalance111  "+result);
            if (!error) {
            $('.roundbalance').val(result);
             }
					});
            }
			});
			
    </script>
</head>
<body>
<!--弹出窗口部分-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">是否加入游戏</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="addressId">账户地址</label>
                    <input type="email" class="form-control" id="addressId" placeholder="请输入账户地址">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="close_win btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="joinGame btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="layout">
        <div class="first_address">
			<span>guestPlayer:</span>
			<span></span>
		</div>
        <div class="first area_showhand">
            <ul>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            </ul>
        </div>

        <div class="second_address">
			<span>hostPlayer:</span>
			<span></span>
		</div>
        <div class="second area_showhand">
            <ul>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            </ul>
		</div>
    <div style="text-align: center;">
    wei:<input type="text" class="getWei form-control weiclass" >
    <button type="button" class="BringIn btn btn-danger">下底注</button>
	<button type="button" class="Bet btn btn-primary">下注</button>

	<button type="button" class="getWinner btn btn-primary">查看赢家</button>
	<button type="button" class="Pass btn btn-primary">过牌</button>
	<button type="button" class="AbandonCard btn btn-primary">弃牌</button>
   roundbalance:<input type="text" class="roundbalance form-control weiclass" disabled="disabled" >
   </div>		
   <div class="active_address">
			<span>activePlayer:</span>
			<span></span>
		</div>
</div>

</body>
</html>
